<template>
  <div class="app-container">
    123
    <div id="about" ref="vcharts"></div>
    <div class="data-main-nyr">
      <p
        @click="getIsActive(1, 1)"
        :class="[isactive == 1 ? 'data-main-nyr-p' : '']"
      >
        日
      </p>
      <p
        @click="getIsActive(2, 1)"
        :class="[isactive == 2 ? 'data-main-nyr-p' : '']"
      >
        周
      </p>
      <p
        @click="getIsActive(3, 1)"
        :class="[isactive == 3 ? 'data-main-nyr-p' : '']"
      >
        月
      </p>
    </div>

    <div id="about2" ref="weeklyEcharts"></div>
  </div>
</template>

<script>
import { listTestuser, getTestuser, delTestuser, addTestuser, updateTestuser, handleTest} from "@/api/testuser/testuser";
import * as echarts from "echarts";

export default {
  name: "Testuser",
  data() {
    return {
      // 遮罩层
      loading: true,
      data: [],

    };
  },
  created() {


  },
  methods: {
    /** 查询testuser列表 */





  },

  mounted() {
    // 2、初始化echarts
    let vchart = echarts.init(this.$refs.vcharts);
    // 3、设置echarts参数
    vchart.setOption({
      // 设置echarts标题
      title: {
        text: "主标题"
      },
      // 设置x轴相关参数
      xAxis: {
        data: ["EZ", "VN", "NOC", "MF"]
      },
      // 设置y轴相关参数
      yAxis: {

      },
      // 设置系列相关参数
      series: {
        // 图形名称
        name: "LOL英雄大全",
        // 图形类型
        type: "bar",
        // 数据
        data: [6300, 4800, 3200, 600]
      }
    })

    let test2 = echarts.init(this.$refs.weeklyEcharts);
    test2.setOption({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "8%",
        containLabel: true,
      }, // 整体gird表示图的位置
      legend: {
        x: "center",
        y: "bottom",
        itemHeight: 8,
        itemWidth: 8,
      }, // legend表示文字的样式，位置。itemHeight和itemWidth相等，表示的就是正方形
      color: ["#218AFF", "#47B8D9"], // 文字的颜色
      xAxis: [ // x坐标的相关配置
        {
          type: "category",
          // data: data.map((item) => item.date), // 对数据的渲染
          data: [1,2,3,4], // 对数据的渲染
          axisPointer: { // 鼠标移入的效果
            type: "line", // 线
            lineStyle: {
              color: "#6b6b6b", // 线的颜色
              type: "solid",
              // width: 40,
            },
          },
          axisTick: { // x轴是否显示刻度线
            show: false,
          },
          axisLine: { // 是否显示x轴最下面的线，以及线的样式
            show: true,
            lineStyle: {
              color: "#818286",
            },
          },
        },
      ],
      yAxis: [ // 由于是折柱混合，所以要有两个y轴，那么就要对两个y轴进行属性样式设定
        { // 左边y轴
          type: "value",
          axisLabel: { // y轴的坐标
            formatter: function (value) {
              return value + "MH/s";
            },
          },
          axisTick: {
            show: false,
          }, // 是否显示刻度线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }, //画y轴的线
          axisLine: {
            show: false, // y轴最左边的线是否显示
            lineStyle: {
              color: "#989898", // y轴最左边的单位的样式
            },
          },// y轴最左边的线的样式
        },
        // y轴右边线的样式，和左边同理
        {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#989898",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: function (value) {
              return value;
            },
          },
        },
      ],
      series: [ // 圆柱和曲线的绘制
        {
          name: "算力",
          type: "bar", // 圆柱
          color: "#1362FE",
          barWidth: 40, // 圆柱的宽
          //  stack: '1',

          itemStyle: { // 圆柱的样式
            //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
            emphasis: {
              barBorderRadius: 30,
              // barBorderColor: "rgba(0,0,0,0)",
              // color: "rgba(0,0,0,0)",
            },
            normal: {
              //柱形图圆角，初始化效果
              barBorderRadius: [6, 6, 0, 0],
              marginBottom: 20,
              // barBorderColor: "rgba(0,0,0,0)",
              // color: "rgba(0,0,0,0)",
            },
          },
          data: [1,2,3,4], // 圆柱数据的渲染
        },

        {// 折现的渲染配置
          name: "收益",
          color: "#FB7829",
          type: "line", //线
          smooth: true, // 光滑
          symbol: "none",//  鼠标滑过，是否显示小圆点
          yAxisIndex: 1, // 不重叠,如果是多个图，可以给yAxisIndex分别设置1，2，3，....
          data: [1,2,3,4], // 折现的数据渲染
        },
      ],

    })




  }
};



</script>

<style>
#about {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}


#about2 {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>
